<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="author" content="order by dede58.com" />
		<title>老司机商城</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="css/category.css" />
		<script type="text/javascript" src="js/jquery1.9.1.js"></script>
		<script type="text/javascript" src="js/category.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>

	<body onload="loadHead()">

		<!-- start banner_x -->
		<div class="banner_x center">
			<a href="./index.html" target="_blank">
				<div class="logo fl"></div>
			</a>
			<div class="nav fl">

			</div>
			<div class="search fr">
				<form action="" method="post">
					<div class="text fl">
						<input type="text" class="shuru" placeholder="请输入商品名称进行搜索" id="q">
					</div>
					<div class="submit fl">
						<input type="button" class="sousuo" value="搜索" id="search" />
					</div>
					<div class="clear"></div>
				</form>
				<div class="clear"></div>
			</div>
		</div>
		<!-- end banner_x -->

		<!--start category-->
		<div class="containor category">
			<div style="background-image: url(image/banner2.jpg);width: 1108px;height: 950px;background-repeat: no-repeat;background-size: 100% 100%;">

			</div>
			<div class="nav_left" style="position: absolute;top: 0px;">
				<ul>
					<li v-for="category in firstLevelCategories" v-bind:data-id="category.id"> <span>{{category.name}}</span></li>
				</ul>
			</div>
			<div class="nav_right">

				<div class="sub hide" v-for="category in categoryInfoList" v-bind:data-id="category.self.id">
					<dl v-for="secondLevelCategory in category.secondLevelCategoryList">
						<dt><a>{{secondLevelCategory.self.name}}<i> &gt;</i></a> </dt>
						<dd>
							<a v-for="thirdLevelCategory in secondLevelCategory.thirdLevelCategoryList" :href="'goods-list.html?cid='+thirdLevelCategory.id" v-bind:data-cid="thirdLevelCategory.id">{{thirdLevelCategory.name}}</a>
						</dd>
					</dl>
				</div>
			</div>
		</div>
		<br><br><br><br><br>
		<!--end category-->

		<div class="danpin center newest-products">
			<div class="biaoti center">最新商品</div>
			<div class="main center">
				<div class="mingxing fl" v-for="product in products">
					<div class="sub_mingxing">
						<a :href="'goods-info.html?pid='+product.id" target="_self"><img :src="imageServerPath+'/'+product.image" alt="product.title"></a>
					</div>
					<div class="pinpai">
						<a :href="'goods-info.html?pid='+product.id" target="_self">{{product.title}}</a>
					</div>
					<div class="youhui" v-html="product.sellPoint"></div>
					<div class="jiage">{{product.price}}元起</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="danpin center hotest-products">
			<div class="biaoti center">热门商品</div>
			<div class="main center">
				<div class="mingxing fl" v-for="product in products">
					<div class="sub_mingxing">
						<a :href="'goods-info.html?pid='+product.id" target="_self"><img :src="imageServerPath+'/'+product.image" alt="product.title"></a>
					</div>
					<div class="pinpai">
						<a :href="'goods-info.html?pid='+product.id" target="_self">{{product.title}}</a>
					</div>
					<div class="youhui" v-html="product.sellPoint"></div>
					<div class="jiage">{{product.price}}元起</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="danpin center history-products">
			<div class="biaoti center">我的足迹</div>
			<div class="main center">
				<div class="mingxing fl" v-for="product in products">
					<div class="sub_mingxing">
						<a :href="'goods-info.html?pid='+product.id" target="_self"><img :src="imageServerPath+'/'+product.image" alt="product.title"></a>
					</div>
					<div class="pinpai">
						<a :href="'goods-info.html?pid='+product.id" target="_self">{{product.title}}</a>
					</div>
					<div class="youhui" v-html="product.sellPoint"></div>
					<div class="jiage">{{product.price}}元起</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</body>
	<script>
		var categoryVm = new Vue({
			el: ".category",
			data: {
				firstLevelCategories: [],
				categoryInfoList: [],
				serverPath: serverPath
			}
		});
		$.get(serverPath + "category/getCategoryInfo", function(res) {
			categoryVm.categoryInfoList = res.data;
			categoryVm.firstLevelCategories = $.map(res.data, function(val) {
				return val.self;
			});
		});

		$.get(serverPath + "product/getNewestProducts", function(res) {
			var products = res.data;
			new Vue({
				el: ".newest-products",
				data: {
					products: products,
					imageServerPath: imageServerPath
				}
			});
		});

		$.get(serverPath + "product/getHotestProducts", function(res) {
			var products = res.data;
			new Vue({
				el: ".hotest-products",
				data: {
					products: products,
					imageServerPath: imageServerPath
				}
			});
		});

		$.ajax({
			url: serverPath + "history/list",
			type: "get",
			xhrFields: {
				withCredentials: true
			},
			success: function(res) {
				var products = res.data;
				new Vue({
					el: ".history-products",
					data: {
						products: products,
						imageServerPath: imageServerPath
					}
				});
			}
		});

		$("#search").bind("click", function() {
			location.href = "goods-list.html?q=" + $("#q").val();
		});
	</script>

</html>